<!--
 * @Description: useWindowScroll（滚动监听）
 * @Author: r_yuesheng
 * @Date: 2022-12-23 16:33:50
 * @LastEditTime: 2022-12-28 11:00:52
 * @LastEditors: r_yuesheng
-->
<template>
  <div>
    <div>
      详情请参见屏幕右下角的滚动值。
    </div>
    <div class="scroller" />
    <div class="scroll_card">
      <div>
        当前滚动值：
      </div>
      X: {{ x }}<br>
      Y: {{ y }}
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs } from 'vue';
import { useWindowScroll } from '@vueuse/core';

export default {
  name: '',
  props: {},
  components: {},
  setup(props, { emit }) {
    function initState() {
      return {
        x: 0,
        y: 0,
      };
    }
    const state = reactive(initState());
    onMounted(() => {
      const { x, y } = useWindowScroll();
      state.x = x;
      state.y = y;
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style scoped>
.scroller {
  position: absolute;
  top: 100%;
  left: 100%;
  width: 10000px;
  height: 10000px;
}
.scroll_card {
  position: fixed;
  right: 0;
  bottom: 20px;
  background-color: bisque;
  padding: 20px;
}
</style>